<template>
<h1>个人简历练习</h1>
  <table border="1px">
    <tr>
      <td>照片：</td>
      <td><img :src="person.imgUrl" width="100px"></td>
    </tr>
    <tr>
      <td>姓名：</td><td>{{person.name}}</td>
      <td>年龄：</td><td>{{person.age}}</td>
    </tr>
    <tr>
      <td>好友：</td>
      <td>
        <ul>
          <li v-for="fName in person.friends">{{fName}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load()">点我加载数据</button>
</template>

<script setup>
import { ref } from 'vue'

const person =ref(
    {name:'',age:'',imgUrl:'',friends:[]});

const load = () => {
  person.value ={
    name:'张三',
    age:18,
    imgUrl:'1.png',
    friends:['李四','王五','赵六']
  };
}

</script>

<style scoped>

</style>